{extend name="public/base" /}

{block name="title"}<title>列表</title>{/block}

{block name="pjax_container"}
<style>
.box{
    margin-top: 30px;
    border-radius: 0;
}
.layui-layer-content{
    padding: 18px;
}
td,th{
    text-align: center;
    border: 1px solid #ccc !important;
}
.pull-right>a{
    border: none;
    width: 80px;
    height: 35px;
    line-height: 25px;
    font-size: 14px;
    letter-spacing: .5px;
}
.box-header.with-border {
    border-bottom: 1px solid #ccc;
}
.container{
    width: 100%;
}
.box.box-primary {
    border-top-color: transparent;
}

.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}
.btn-primary{
    background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-right: 10px;
    padding: 7px 12px;
}
.btn-primary:hover{
    background-color: #1890FF;
    color: #fff;
    border: none;
    opacity: .9;
    border-radius: 6px !important; 
}

</style>
<section class="content-header">
  
    <ol class="breadcrumb">
        <li>系统管理</li>
        <li class="active">角色列表</li>
    </ol>
</section>
<section class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="pull-left">
                        <a href="{:url('create')}" class="btn btn-primary"><i class="fa fa-save"></i> 新增</a>
                        <a href="javascript:;" class="btn btn-primary" id="import_role"><i class="glyphicon glyphicon-file"></i> 导入</a>
                        <a href="__STATIC__/role_import_template.xlsx" class="btn btn-primary"><i class="glyphicon glyphicon-file"></i> 下载导入模板</a>
                    </div>
                </div>
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <th>序号</th>
                            <th>角色id</th>
                            <th>名称</th>
                            <th style="text-align: center;width: 300px;">操作</th>
                        </tr>
                        {volist name="list" id="v"}
                            <tr>
                                <td>{$key+1}</td>
                                <td>{$v.id}</td>
                                <td>{$v["name"]}</td>
                                <td style="text-align: center;">
                                    {:authAction('User/role_user_list','create19',['id'=>$v['id']])}
                                    {:authAction(CONTROLLER_NAME.'/edit','edit',['id'=>$v['id']])}
                                    {:authAction(CONTROLLER_NAME.'/delete','delete_one',['id'=>$v['id']])}
                                </td>
                            </tr>
                        {/volist}
                    </table>
                </div>
                <div class="box-footer clearfix">
                    {$list->render()}
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    layui.use(['jquery','layer','form','upload'], function () {
        var $ = layui.$;
        var upload = layui.upload;
        var layer_index = '';//加载层

        //导入人员
        upload.render({
            elem: '#import_role'
            ,url: "{:url('role/role_import')}",
            accept:"file",
            exts:'xlsx',
            size:'8192', // 8M大小
            choose:function(obj){
                layer_index = layer.load(2);
            },
            done: function(res){
                layer.close(layer_index);
                if(res.err == 1){
                    // layer.msg(res.msg, {icon:2});
                    layer.open({
                        type: 1,
                        title:'错误信息',
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        shadeClose: true, //开启遮罩关闭
                        content: res.msg
                    });
                }else{
                    layer.msg(res.msg, {icon:1}, function(){
                        location.reload();
                    });
                }
            }
            ,error: function(){
                layer.close(layer_index);
            }
        });


    });
</script>
{/block}